<template>
    <n-space>
        <n-card size="small" title="扫码支付">
            <n-form :model="scanModel" ref="scanFormRef">
                <n-form-item label="支付金额">
                    <DecimalInput :border="true" :precision="2" suffix="元" :min="0.01" v-model:base="scanModel.amt" />
                </n-form-item>
                <n-form-item label="支付通道">
                    <n-radio-group v-model:value="scanModel.cnl" name="radiogroup" @update:value="onScanModelChange">
                        <n-space>
                            <n-radio :value="20">微信扫码</n-radio>
                            <n-radio :value="30">支付宝扫码</n-radio>
                        </n-space>
                    </n-radio-group>
                </n-form-item>
                <n-form-item label="支付信息">
                    <n-space>
                        <n-input placeholder="请填写AppID" v-model:value="scanModel.appid" clearable />
                        <n-input placeholder="请填写OpenID/UserID" v-model:value="scanModel.puser" clearable />
                    </n-space>
                </n-form-item>
                <n-form-item>
                    <n-button type="primary" :loading="loading" @click="execDoPay">提交支付</n-button>
                </n-form-item>
            </n-form>
            <div v-show="qrShow" :style="{ border: '1px dashed grey', width: '280px', height: '280px', margin: '0 auto', padding: '10px' }">
                <div id="qr" class="qr">
                    <canvas ref="qrRef" id="canvas" :style="{ width: '280px', height: '280px' }"></canvas>
                </div>
            </div>
        </n-card>
    </n-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Http } from '@/libs'
import QRCode from 'qrcode'
import DecimalInput from '@/comp/func/DecimalInput.vue'

const loading = ref(false)

const qrRef = ref<any>(null)
const qrShow = ref<boolean>(false)

const scanFormRef = ref<any>(null)

const scanModel = ref<any>({
    amt: 100,
    cnl: 20,
    appid: 'wxdb6494e588b1f5bf',
    puser: 'empty',
})

const onScanModelChange = (val: any) => {
    if (val == 20) {
        scanModel.value.appid = 'wxdb6494e588b1f5bf'
    } else {
        scanModel.value.appid = '2021003130623603'
    }
}

const execDoPay = () => {
    loading.value = true
    Http.post('/app/base/payment/submit', {
        type: 'Test',
        data: '' + scanModel.value.amt,
        pcnl: scanModel.value.cnl,
        parg: JSON.stringify({ appid: scanModel.value.appid, puser: scanModel.value.puser }),
    })
        .then(resp => {
            loading.value = false
            if (resp.stat.err > 0) {
                return
            }
            qrShow.value = true
            let canvas = document.getElementById('canvas')
            QRCode.toCanvas(canvas, scanModel.value.cnl == 20 ? resp.data.wxqr.url : resp.data.aliqr.url, { width: 280, margin: 2 }, error => {
                if (error) console.error(error)
            })
        })
        .catch(() => {
            loading.value = false
        })
}
</script>
